<template>
  <div>
    <div
      class="box"
      @drop.stop.prevent="handleDrop"
      @dragover.stop.prevent="handleDragover"
      @dragenter.stop.prevent="handleDragover"
    />
    <!--
      dragenter:拖入刚进入到相应dom区域
      dragover：拖入且在相应dom区域上面
      drop：拖入且在相应dom区域上面松开鼠标
    -->
  </div>
</template>
<script>
export default {
  methods: {
    handleDrop() {
      console.log('拖入且在相应dom区域上面松开鼠标')
    },
    handleDragover() {
      console.log('拖入刚进入到相应dom区域')
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 300px;
  height: 150px;
  border: 1px dashed #ccc;
}
</style>
